import React, {useEffect} from 'react';
import { connect } from "react-redux";
import {Helmet, HelmetProvider} from "react-helmet-async";
import {  useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useInView } from "react-intersection-observer";

import I18nBtn from "@/i18n/i18nBtn";
import {BaiduTrackPageview, GetBaidu} from "@/utils/BaiDuTongJi/GetBaidu";
import Trails from "@/components/ReactSpringTrails/Trails";
import actions from "@/store/actions";

import Css from "./index.module.css";
import ScrollToTops from "@/components/ScrollToTop";
const Test1 = (props)=> {
    const {dispatch} = props;
    //滑动页面，顶部导航固定
    const [refTopNav,topNavInView] = useInView();
    //加载百度统计代码
    GetBaidu(props);
    //百度统计页面url
    BaiduTrackPageview(window.base.config.path+'test');


    let navigate = useNavigate();
    const {t,i18n} = useTranslation();
    const handleClickToHome = () =>{
        navigate(window.base.config.path)
    }
    const data = [
        {title:'第一一条'},
        {title:'第二二条'},
        {title:'第三三条'}
    ]
    const data1 = [
        {title:'第一一'},
        {title:'第二二'},
        {title:'第三三'}
    ]
    useEffect(()=>{
        dispatch(actions.actTopNav.actTopNav(topNavInView))
    },[dispatch,topNavInView])
    return(
        <React.Fragment>
            <HelmetProvider>
                <Helmet>
                    <title>111二级关于我们-中智关爱通</title>
                    <meta name="keywords" content="二级企业福利平台,企业福利定制,节日福利礼品,员工礼品供应商" />
                    <meta name="description" content="二级关爱通是中智旗下品牌，央企服务保证，为企业提供完整员工福利解决方案、企业福利平台定制、节日福利、员工礼品、员工激励、员工体检，以及一站式员工弹性福利平台。关爱通服务客户超21000家，覆盖员工近700万人。" />
                </Helmet>
            </HelmetProvider>
            <div className={Css.box1} ref={refTopNav}>PC首页</div>
            <div >{t("Pc.erji")}</div>
            <I18nBtn i18n={i18n}/>
            <button
                onClick={handleClickToHome}
            >
                返回11
            </button>
            <div  style={{height:'1000px',overflow:"hidden",background:'#ff0'}}></div>
            <div className={Css.box1} >test111</div>
            <div  style={{height:'300px',overflow:"hidden",background:'#f00',display:"flex",alignContent:"center",justifyContent:"space-around"}}>
                <Trails>
                    {data && data.length>0 && data.map((item,index)=>{
                        return(
                            <div key={index}>{item.title}</div>
                        )
                    })}
                </Trails>
            </div>
            <div  style={{height:'100px',overflow:"hidden",background:'#ff0'}}></div>
            <Trails className={Css.box}>
                {data1 && data1.length>0 && data1.map((item,index)=>{
                    return(
                        <div key={index}>{item.title}</div>
                    )
                })}
            </Trails>
            <div style={{height:'1000px',overflow:"hidden"}}></div>
            <ScrollToTops  showUnder={1000}/>
        </React.Fragment>
    )
}
export default connect((state)=>{
    return {
        state:state
    }
})(Test1)